<template>
	<view class="more-container init-page" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar>
		  <template v-slot:title>
			<text>歌单广场</text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
	  <myuni-tab :title="titleData" @tabChange="tabChanged">
		  <navigator class="scroll-item" :url="type==='1'?'/pages/playlist/wander?id='+item.id:'/pages/playmv/playmv?id='+item.id+'&type='+currentUrl" v-for="(item,index) in contentData" :key="item.id">
		  	<view class="cover">
		  		<image :src="item.coverImgUrl" :lazy-load="true" mode="widthFix"></image>
		  		<view class="normal-tag" v-if="item.playCount">
		  			<i class="iconfont icon-24gl-play"></i><text>{{(item.playCount/10000).toFixed(1)}}万</text>
		  		</view>
		  	</view>
		  	<view class="item-name">{{item.name}}</view>
		  </navigator>
		  <view class="scroll-item"></view>
		  <view class="scroll-item"></view>
	  </myuni-tab>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				type:1,
				titleData:['最新','网易出品','全部'],
				contentData:[],
				currentTag:'',
				urlList:['/mv/first','/mv/exclusive/rcmd?limit=30','/mv/all'],
				currentUrl:0
			}
		},
		onLoad(option) {
			this.type=option.type
			if(this.type==='1'){
				this.initData()
			}else{
				this.getMv()
			}			
		},
		computed:{
			...mapState(['themeType'])
		},	
		methods: {
			getMv(){
				this.request({
					url:this.urlList[this.currentUrl]
				}).then(res=>{
					this.contentData=res.data.map(val=>{return {id:val.id,coverImgUrl:val.cover,playCount:val.playCount,name:val.name}})
				})
			},
			initData(){
				this.request({
					url:'/playlist/hot'
				}).then(res=>{
					this.titleData=res.tags.map(val=>val.name)
					this.currentTag=this.titleData[0]
					this.getContentData()
				})
			},
			getContentData(){
				this.request({
					url:'/top/playlist?limit=17&cat='+this.currentTag
				}).then(res=>{
					this.contentData=res.playlists.map(val=>{return {id:val.id,coverImgUrl:val.coverImgUrl,playCount:val.playCount,name:val.name}})
				})
			},
			tabChanged(val){
				this.currentTag=val.name
				if(this.type==='1'){
					this.getContentData()
				}else{
					this.currentUrl = val.index
					this.getMv()
				}	
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.more-container{
	::v-deep.content{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.scroll-item{
		  padding: 20rpx 20rpx;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  flex-shrink: 0;
		  width: 180rpx;
		  .cover{
			  position: relative;
			  width: 100%;
			  max-height: 188rpx;
			  color: #fff;
			  image{
			  	width: 100%;
			  	border-radius: 10rpx;
			  }
			  .swiper-tag{
				 position: absolute;
				 right: 6rpx;
				 top: 6rpx;
				 height: 12px;
				 line-height: 12px;
				 font-weight: 700;
			  }
			  .normal-tag{
				  padding: 0 10rpx;
				  display: flex;
				  position: absolute;
				  right: 6rpx;
				  top: 6rpx;
				  height: 12px;
				  line-height: 12px;
				  background-color: #ccc;
				  opacity: .5;
				  border-radius: 16rpx;
				  text,i{
					 font-size: 12px;
				  }
			  }
		  }
		  .item-name{
		  	width: 100%;
		  	height: 30px;
		  	display: -webkit-box;
		  	overflow: hidden; 
		  	-webkit-box-orient: vertical;
		  	-webkit-line-clamp: 2;
		  	font-size: 24rpx;
		  	color: #535355;
		  	white-space: pre-wrap;
		  }
		}
	}
}
</style>
